import React, { useEffect, useState } from 'react';
import {
  Box,
  Dialog,
  Empty,
  Grid,
  GridItem,
  IconButton,
  MainButton,
  MainColorType,
  makeToast,
  Menu,
  ModalHeader,
  SecondaryButton,
  Text,
  ThemeColorType,
} from '@nova-hf/ui';
import Authentication from 'beta/store/authentication';
import { IContext } from 'beta/typings/context';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { capitalize } from 'lodash';
import { inject, observer } from 'mobx-react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
  DiscountStatus,
  useContractDiscountsQuery,
  useRemoveContractDiscountMutation,
} from 'typings/graphql';

import { SectionHeader } from '../comoponents/SectionHeader';

type DiscountsProps = {
  color?: MainColorType;
  authentication?: Authentication;
  contractId: string;
};

const Discounts = ({ color, authentication, contractId }: DiscountsProps) => {
  const { t } = useTranslation(['fiber']);
  const isStaff = authentication?.isStaff;
  const router = useRouter();
  const [showModal, setShowModal] = useState(false);
  const [selectedDiscount, setSelectedDiscount] = useState('');
  const customerId = router?.query?.customerId ?? '';
  const serviceId = router?.query?.serviceId ?? '';
  const { data, loading, error, refetch } = useContractDiscountsQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
    skip: !contractId,
  });
  const discounts = data?.contractDiscounts;
  const [removeDiscount] = useRemoveContractDiscountMutation({
    onCompleted(data) {
      if (data?.removeContractDiscount?.message) {
        makeToast.success(t('discounts.removeSuccess'), '');
      }
      refetch();
    },
    onError(error) {
      if (error) {
        makeToast.danger(t('discounts.removeFailure'), error.message);
      }
    },
  });

  const handleMenuClick = (discountId: string) => {
    setShowModal(true);
    setSelectedDiscount(discountId);
  };

  const handleRemoveDiscount = () => {
    removeDiscount({
      variables: {
        input: {
          id: contractId,
          discountId: selectedDiscount,
        },
      },
    });
    setShowModal(false);
  };

  const discountStatusMap = (status?: DiscountStatus): { color: ThemeColorType; text: string } => {
    switch (status) {
      case DiscountStatus.Pending:
        return { color: 'attention', text: t('discounts.pending') };
      case DiscountStatus.Active:
        return { color: 'success', text: t('discounts.active') };
      case DiscountStatus.Cancelled:
        return { color: 'warning', text: t('discounts.inactive') };
      default:
        return { color: 'black100', text: status ?? '' };
    }
  };

  const discountReasonMap = (reason?: string) => {
    switch (reason) {
      case 'tilbod':
        return t('discounts.offer');
      case 'gjof':
        return t('discounts.gift');
      case 'nemi':
        return t('discounts.student');
      default:
        return capitalize(reason);
    }
  };

  useEffect(() => {
    refetch();
  }, [data?.contractDiscounts]);

  return (
    <Box>
      <SectionHeader
        headerTitle={t('discounts.title')}
        rightActionNode={
          isStaff && (
            <SecondaryButton
              colorScheme={color}
              icon="add"
              text={t('discounts.buttonText')}
              wrapper={(children) => (
                <Link
                  passHref
                  href={`/beta/${customerId}/thjonustur/${serviceId}/afslattur`}
                  legacyBehavior
                >
                  {children}
                </Link>
              )}
            />
          )
        }
      />

      {!discounts?.length || error || loading ? (
        <Empty color={color} icon="bestDeal" subtitle={t('discounts.notFoundDescription')} />
      ) : (
        <Grid gridTemplate={{ sm: 6, md: 12 }}>
          {discounts?.map((discount) => {
            return (
              <GridItem key={discount?.id} gridColumn={{ sm: 'span3', md: 'span4' }}>
                <Box boxShadow="small">
                  <Box
                    backgroundColor="white"
                    dottedShadow="small"
                    padding={3}
                    flexDirection="column"
                    display="flex"
                    gap={5}
                  >
                    <Box
                      display="flex"
                      flexDirection="row"
                      justifyContent="space-between"
                      alignItems="flex-end"
                    >
                      <Text
                        color={discountStatusMap(discount?.status ?? DiscountStatus.Unknown).color}
                        variant="eyebrowMedium"
                      >
                        {discountStatusMap(discount?.status ?? DiscountStatus.Unknown).text}
                      </Text>
                      <Menu
                        color={color}
                        label="Menu"
                        items={[
                          {
                            text: t('discounts.remove'),
                            onClick: () => handleMenuClick(discount?.id),
                          },
                        ]}
                        disclosure={
                          <IconButton
                            color="black100"
                            icon="dotsHorizontal"
                            hiddenButtonText="Discount options"
                          />
                        }
                      />
                    </Box>
                    <Text variant="h6" color={color}>
                      {discount?.offer?.name ?? t('discounts.discount')}
                    </Text>
                    <Box
                      display="flex"
                      flexDirection="row"
                      justifyContent="space-between"
                      alignItems="center"
                    >
                      {discount?.start && discount?.end && (
                        <Text variant="pMediumRegular">{`${formatDate(
                          discount?.start,
                          'MM/yy',
                        )} - ${formatDate(discount?.end, 'MM/yy')}`}</Text>
                      )}
                      <Text variant="pMediumRegular">
                        {discountReasonMap(discount?.offerReasonId ?? '')}
                      </Text>
                    </Box>
                  </Box>
                </Box>
              </GridItem>
            );
          })}
        </Grid>
      )}
      <Dialog
        ariaLabel={t('discounts.modalLabel')}
        onVisibilityChange={(isVisible: boolean) => setShowModal(isVisible)}
        isVisible={showModal}
        width={['11/12', '10/12', '6/12']}
      >
        <Box width="100%" display="flex" flexDirection="column">
          <ModalHeader title={t('discounts.modalTitle')} color={color} />
          <Box marginY={4} flexGrow={1}>
            {t('discounts.removeConfirmation')}
          </Box>
          <Box display="flex" flexDirection={['column', 'row', 'row']} gap={4}>
            <MainButton
              text={t('discounts.modalBack')}
              colorScheme="white"
              onClick={() => setShowModal(false)}
              dottedShadow="none"
            />
            <MainButton
              text={t('discounts.confirmRemove')}
              colorScheme={color}
              icon="checkMark"
              onClick={() => handleRemoveDiscount()}
              dottedShadow="none"
            />
          </Box>
        </Box>
      </Dialog>
    </Box>
  );
};

Discounts.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    serviceId: query.serviceId,
    namespacesRequired: ['fiber'],
  };
};

export default inject('authentication')(observer(Discounts));